import React from 'react';
import * as PropTypes from 'prop-types';
import styles from './style/index.less';
import Iconfont from 'components/Iconfont';

class Report extends React.Component {
  static defaultProps = {
    dataSource: {},
    columns: [],
  }

  render() {
    const { dataSource, columns } = this.props;

    return (<div className={`${styles.List}`}>
      {columns.map((ele, index) => {
          const { unit, icon, label, field } = ele;
          
          return (
            <div key={index} className={styles.items}>
                {icon ? <div className={styles.thumb}><Iconfont type={icon} /></div>: null}
                <div className={styles.line}>
                    <div className={styles.content}>{label}<span>（{unit}）</span></div>
                    <div className={styles.extra}>{dataSource[field] || dataSource[field] === 0 ? dataSource[field] : '-'}</div>
                </div>
            </div>
            )
        })
      }
    </div>)
  }
}

Report.propTypes = {
    columns: PropTypes.array,
    dataSource: PropTypes.object,
}

export default Report;